<template>
    <a-card :bordered="false">
        <a-spin :spinning="confirmLoading">
            <j-form-container :disabled="formDisabled">
                <a-form :form="form" slot="detail">
                    <a-row>
                        <a-col :span="24">
                            <a-form-item label="安全生产起始日期" :labelCol="labelCol"
                                :wrapperCol="wrapperCol">
                                <j-date placeholder="请选择起始日期" v-decorator="['safeDate']"
                                    :trigger-change="true" style="width: 100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="夜班管理员" :labelCol="labelCol"
                                :wrapperCol="wrapperCol">
                                <a-input v-decorator="['nightManager']"
                                    placeholder="请输入夜班管理员"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <j-date placeholder="请选择开始时间" v-decorator="['startDate']"
                                    :trigger-change="true" style="width: 100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <j-date placeholder="请选择结束时间" v-decorator="['endDate']"
                                    :trigger-change="true" style="width: 100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" style="text-align: center">
                            <a-button @click="submitForm">确认保存</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </j-form-container>
        </a-spin>
    </a-card>
</template>

<script>

import { getAction, putAction } from '../../api/manage'
import pick from 'lodash.pick'

export default {
    name: 'SafeProductionList',
    components: {
    },
    data() {
        return {
            form: this.$form.createForm(this),
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            confirmLoading: false,
            validatorRules: {
            },
            url: {
                add: "/safeProduction/safeProduction/add",
                edit: "/safeProduction/safeProduction/edit",
                queryById: "/safeProduction/safeProduction/queryById",
                getOne: '/safeProduction/safeProduction/getOne',
            }
        }
    },
    created() {
        this.getOne()
        this.showFlowData();
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    methods: {
        getOne() {
            getAction(this.url.getOne).then((res) => {
                if (res.success) {
                    console.log(res.result)
                    this.model = res.result;
                    this.edit(this.model);
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        add() {
            this.edit({});
        },
        edit(record) {
            this.form.resetFields();
            this.model = Object.assign({}, record);
            this.visible = true;
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.model, 'safeDate', 'nightManager', 'startDate', 'endDate'))
            })
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result);
                    }
                });
            }
        },
        submitForm() {
            const that = this;
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    let formData = Object.assign(this.model, values);
                    console.log("表单提交数据", formData)
                    putAction(this.url.edit, formData).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            that.getOne();
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                    })
                }

            })
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'safeDate', 'nightManager', 'startDate', 'endDate'))
        },
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>